//导入数据
import{ 
  getTabsData,
  getTabViewData
 } from "../../api/apis.js";

 import{
   CacheUtil
 } from "../../utils/CacheUtil";

//定义常量 管理缓存的key
const CACHE_KEY = {
  TABS:"app_tabs_data",
  TAB_VIEW_DATA_PREFIX : "tab_view_data_"
}
//定义常量 管理缓存的过期时间
const CACHE_EXPIRE ={
  TABS: 3600,
  TAB_VIEW_DATA: 900
}

Page({
  //页面初始数据
  data:{
    active:1, //标签页默认激活项
    tabViewData:[], //搜索框的值
    value:"", //当前标签页面数据
    isShowShare:false, // 是否显示分享面板
    options: [  // 分享面板的配置
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ],
  },

  // 自定义方法 -- 显示分享面板showSharePanle
  showSharePanle(evt){
    this.setData({
      isShowShare:true
    })
  },

  // 自定义方法 --  选择分享方式
  onSelectShare(evt){
    console.log("当前分享方式：",evt.detail)

    const {
      icon,
      name
    } = evt.detail;


    // 关闭分享面板
    this.setData({ 
      isShowShare:false
     })

     wx.showToast({
      title: name,
      icon:"none"
    })

    // 拓展：a标签唤端技术（deep_link）
    //URL Scheme (通用)
    // universal Link(ios)
    // App Link、Chrome intents(Android)

  },
  // 自定义方法 --取消分享
  onCloseShare(){
    // 关闭分享面板
    this.setData({
      isShowShare:false
    })
  },

  //自定义函数 -- 获取tab数据
  getTabs(){
    //1.尝试获取缓存
    const CacheTabs = CacheUtil.get(CACHE_KEY.TABS);
    //如果缓存的值存在
    if(CacheTabs){
      console.log("使用缓存中的 tabs：",CacheTabs);
      //把缓存的tabs发送到视图层
      this.setData({
        tabs: CacheTabs
      })
      //有缓存就不用请求新数据，return阻断函数向下执行
      return;
    }

    //2.如果没有缓存则显示 loading
    wx.showLoading({
      title: '加载中...',
      mask: true
    })

    //3.加载标签页数据
    getTabsData()
    //请求成功执行 .then 方法
      .then(res => {
        //请求到的数据  可选链式操作符，链式其中一个值不存在，返回undefined
        let tab_arr = res?.data?.data?.tab
      
        //如果数据结构异常
        if(!tab_arr){
          console.log("数据结构异常",res);
          return;
        }
        //去掉数组的第一项（新片场App没有 `入场必看` 的页面）
        tab_arr.shift()
      //数据正常，发送到视图层
      this.setData({
        tabs: tab_arr
      })
      console.log("请求到tabs数据：",tab_arr);
      //把数据存入缓存中
      CacheUtil.set(CACHE_KEY.TABS, tab_arr,CACHE_EXPIRE.TABS);
      // CacheUtil.set("tab2",tab_arr,900)
    })
      //请求失败执行 .catch方法
      .catch(err=> console.log("请求失败：",err))
      //请求结束执行 .finally 方法
      .finally(() => {
        wx.hideLoading();
      })
  },

  //自定义函数 -- 切换标签页
  toggleTabs(evt){
    //清除上一个标签页的页面数据
    this.setData({
      tabViewData:[]
    })

    const {
      index, //当前标签页的下标
      title, //当前标签页的标题
    } = evt.detail

    //通过下标，获取当前标签页 数据
    const currentTab = this.data.tabs[index];
    // console.log("当前点击的标签页是：", currentTab);

    //构建缓存用的动态键名
    const cacheKey = CACHE_KEY.TAB_VIEW_DATA_PREFIX + currentTab.alias;

    //1. 尝试从缓存中获取数据
    const CacheTabView = CacheUtil.get(cacheKey);
    //如果缓存存在且有效
    if (CacheTabView) {
      console.log(`使用缓存中的${title}数据：`,CacheTabView);
      this.setData({
        tabViewData:CacheTabView
      })
      return;
    }

    //2.如果没有缓存，显示loading
    wx.showLoading({
      title: `加载${title}页数据...`,
      mask: true
    })

    //3.用当前标签页的link发请求
    getTabViewData(currentTab.link)
    //成功
    .then(res => {
      const tabViewData = res?.data?.data?.children;
      //如果数据结构异常
      if (!tabViewData) {
        console.error(`${title}页数据结构异常`);
        return;
      }
      //否则结构数据正常
      console.log(`请求到${title}页数据：`,tabViewData);
      this.setData({
        tabViewData
      })
      //存入缓存中
      CacheUtil.set(cacheKey, tabViewData,CACHE_KEY.TAB_VIEW_DATA);
    })
    // 失败
    .catch(e => console.error("请求失败",e))
    // 结束
    .finally(() =>{
      //关闭Loading
      wx.hideLoading()
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     this.getTabs(); // 自定义函数
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
